<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择地址</title>
	<script type="text/javascript" src="static/admin/js/jquery.min.js"></script>
    
    <style>
        body {
            margin: 0;
            background-color: #eee;
            box-sizing: border-box;
        }

        .chunk {
            border: solid 1px #eee;
            background-color: white;
            display: flex;
            padding: 15px 10px;

        }

        .chunk-left {
            width: 30%;
        }

        .chunk-right {
            width: 70%;
            display: flex;
            justify-content: space-between;
            color: rgb(174, 175, 175);
        }

        .confirmBtn {
            width: 80%;
            height: 50px;
            line-height: 40px;
            background-color: #0099FF;
            text-align: center;
            margin: 30px auto;
            color: white;
			font-size:20px
        }



        .shade {
            background-color: rgba(78, 77, 77, 0.2);
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
        }

        .shade-white {
            width: 100%;
            height: 60vw;
            background-color: white;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .shade-header {
            display: flex;
            /* width: 100%; */
            justify-content: space-between;
            padding: 15px 10px;
        }
        .select{
            width:100%;
            height:100%;
            font-size:16px;
            border:0px solid #000;
			background-color: white;
        }
        .input{
            font-size:16px;
            border:0px solid #000;
            height:28px
        }
    </style>
</head>

<body>
    <form  action="{:url('admin/Apiuser/apiuser')}?userid={$userid}&serial={$serial}" method="post" enctype="multipart/form-data">
    <div>
        <div class="chunk" >
            <div class="chunk-left">选择小区</div>
            <div class="chunk-right">
                <select  class="select"  name="community"  id="community" onchange="getgroup()">
                    <option value="">请选择小区</option>
                   <option value="{$communitylist.id}">{$communitylist.name}</option>
                </select>
            </div>
        </div>
        <div class="chunk" >
            <div class="chunk-left">组团</div>
            <div class="chunk-right">
                <select  class="select" onchange="getbuilding()" id="group" name="group">
                    <option value="">请选择组团</option>
                    {if isset($groups)}
                        {foreach $groups as $group}
							<option value="{$group}">{$group}幢</option>
                        {/foreach}
                    {/if}
                </select>
            </div>
        </div>
        <div class="chunk">
            <div class="chunk-left">幢号</div>
            <div class="chunk-right">
                <select  class="select" onchange="getunit()" id="building" name="building">
                    <option value="">请选择幢号</option>
                    
                </select>
            </div>
        </div>
        <div class="chunk">
            <div class="chunk-left">单元</div>
            <div class="chunk-right">
                <select  class="select" onchange="getroomid()" id="unit" name="unit">
                    <option value="">请选择单元</option>
                    
                </select>
            </div>
        </div>
        <div class="chunk" >
            <div class="chunk-left">房间号</div>
            <div class="chunk-right">
                <select  class="select"  id="roomid" name="room">
                    <option value="">请选择房间号</option> 
                </select>
            </div>
        </div>
		<div class="chunk">
			<div class="chunk-left">关系</div>
            <div class="chunk-right">
				 <select  class="select"  id="relation" name="relation">
                    <option value="1">业主</option> 
					<option value="2">家人</option> 
					<option value="3">租客</option> 
					<option value="4">访客</option> 
                </select>
               
            </div>
		</div>
       
        <div class="chunk" >
            <div class="chunk-left">姓名</div>
            <div class="chunk-right" >
                <input type="text" placeholder="请输入姓名" class="input" required="required" name="name"/>
            </div>
        </div>
        <div class="chunk" >
            <div class="chunk-left">手机号</div>
            <div   style="display: flex;justify-content: space-between;color: rgb(174, 175, 175);width:150px">
                <input type="number" class="input" placeholder="请输入手机号" name="phone" id="phone" required="required" style="width:150px"/>
            </div>
			<div  style="display: flex;justify-content: space-between;color: rgb(174, 175, 175);border:2px solid #FFB800;color:#999;width:28%;border-radius:5px" id="sendCode" onclick="getCode()">
                获取验证码
            </div>
        </div>
        <div class="chunk" >
            <div class="chunk-left">验证码</div>
            <div class="chunk-right" >
                <input type="text"  class="input" placeholder="请输入验证码" required="required" name="number"/>
            </div>
        </div>
        <div class="chunk">
            <input type="submit" class="confirmBtn" value="确认申请"    style="margin:0 auto;"/>
        </div>
       

    </div> 
    </form>

</body>

</html>

<script>

    function getgroup(){
        var community=$("#community").val();
        $("#building").html("<option value=''>请选择幢号</option>");
        $("#unit").html("<option value=''>请选择单元</option>");
        $("#roomid").html("<option value=''>请选择房间号</option>");
        $.post("{:url('getgroup')}",{communityid:community},function(data){

            $("#group").html(data);
        },'html')
    }
    function getbuilding(){
        var community=$("#community").val();
        var group=$("#group").val();
        
        $("#unit").html("<option value=''>请选择单元</option>");
        $("#roomid").html("<option value=''>请选择房间号</option>");
        
        $.post("{:url('getbuilding')}",{communityid:community,group:group},function(data){
                $("#building").html(data);
        },'html')
    }
    function getunit(){
        var community=$("#community").val();
        var group=$("#group").val();
        var building=$("#building").val();
        
        $("#roomid").html("<option value=''>请选择房间号</option>");
       
        $.post("{:url('getunit')}",{communityid:community,group:group,building:building},function(data){
                $("#unit").html(data);
        },'html')
    }
    function getroomid(){
        var community=$("#community").val();
        var group=$("#group").val();
        var building=$("#building").val();
        var unit=$("#unit").val();
        $.post("{:url('getroomid')}",{communityid:community,group:group,building:building,unit:unit},function(data){ 
                $("#roomid").html(data);
                console.log(data);
        },'html')
    }
    //校验表单
    function checkform(){
        var roomid=$("#roomid").val();
        if(roomid==""){
            alert("请选择房间");
            return false;
        }
        return true;
    }
</script>
    <script>
        var sendCode = document.getElementById("sendCode");
        var timer = null;
        var Number = 60;
        var fa = true;
		
        function getCode() {
            var phone = $("#phone").val();
            var myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
            var url = "{:url('admin/Apiuser/personnel')}"
            if(!myreg.test(phone)){
                alert("请输入正确的手机号");
				return false;
            }else {
                if(fa) {
                    fa = false;
                    $.post(url,{phone: phone},function (e) {
                            if(e.code == '1'){ 
							   alert(e.info);
							   
                            }
                            if(e.code == '0'){
                                alert(e.info);
								return false;
                            }
                        },'json');
                    sendCode.innerHTML = "";
					timer = setInterval(function() {
						Number--
						if(Number <= 0) {
							clearInterval(timer);
							timer = null;
							Number = 60;
							sendCode.innerHTML = "重新发送";
							fa = true;
						} else {
							sendCode.innerHTML = Number + "s";
						}
					}, 1000)
                }
            }
        }
    </script>
    